<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据绑定</title>
    <script src="../../JS/vue.js"></script>
  </head>
  <div id="root">
    <!-- Vue 中有2中数据绑定的方式 
        a.单向绑定v-bind数据只能从data流向页面
        b.双向绑定v-model数据不仅能从data流向页面，还能从页面到data 
    
    备注：
        a. 双向绑定一般都应用在表单类元素上
        b. v-model:value="" 可直接简写为 v-model=''
    
    -->
    单项数据绑定:<input type="text" :value="value" />
    <h3>{{value}}</h3>
    <br />

    双向数据绑定:<input type="text" v-model="value" />
    <h3>{{value}}</h3>
  </div>
  <script>
    Vue.config.productionTip = false;
    new Vue({
      el: "#root",
      data: {
        value: "xiaomo",
      },
    });
  </script>
  <body></body>
</html>
